<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Getting Started: Serving Web Content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript">
    


    function ajax_method(url,data,method,success) {
    
        // 异步对象
        var ajax = new XMLHttpRequest();

        // get 跟post  需要分别写不同的代码
        if (method=='get') {
            // get请求
            if (data) {
                // 如果有值
                url+='?';
                url+=data;
            }else{

            }
            // 设置 方法 以及 url
            ajax.open(method,url);

            // send即可
            ajax.send();
        }else{
            // post请求
            // post请求 url 是不需要改变
            ajax.open(method,url);

            // 需要设置请求报文
            ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            // 判断data send发送数据
            if (data) {
                // 如果有值 从send发送
                ajax.send(data);
            }else{
                // 木有值 直接发送即可
                ajax.send();
            }
        }

        // 注册事件
        ajax.onreadystatechange = function () {
            // 在事件中 获取数据 并修改界面显示
            if (ajax.readyState==4&&ajax.status==200) {
                // console.log(ajax.responseText);

                // 将 数据 让 外面可以使用
                // return ajax.responseText;

                // 当 onreadystatechange 调用时 说明 数据回来了
                // ajax.responseText;

                //  外面可以传入一个 function 作为参数 success
                // 返回值为json
                var jsonobj = JSON.parse(ajax.responseText);
                var result = "";
                for (var name in jsonobj){
                	result = jsonobj[name].value;
                }
             //  result = ajax.responseText;
            updateTD1(ajax.responseText);
             //   success(result);
            }
        }

    }
    
    
    function updateTD1(tdInnerText) {
    	
    	var docnObj=document.getElementById("td1");
    	docnObj.innerHTML = docnObj.innerHTML+tdInnerText;
    }
    
    
    </script>
    
</head>
<body>
<table border="1" align="center" width="98%" >
<tr><td  id="td1">   </td><td>   </td></tr>
<tr><td  id="td2">   </td><td>   </td></tr>

</table>
</body>

<script>

var h = document.documentElement.clientHeight || document.body.clientHeight;
var w = document.documentElement.clientWidth || document.body.clientWidth;

var docnObj=document.getElementById("td1");

docnObj.style.width = w*2/3+'px';
docnObj.style.height = h*2/3+'px';

var docnObj2=document.getElementById("td2");

docnObj2.style.height = h/3.5+'px';



setInterval('ajax_method("/testData",12,"get","updateTD1") ',1000); 
</script>
</html>